<template>
  <div>
    <el-card>
      <div slot="header" class="card-header" :style="examination4Player?{textAlign:'center'}:''">
        <span style="font-size: 120%;">{{paperData.title||paperData.paperTitle}}</span>
      </div>
      <div>
        <el-form v-if="examination4Player" ref="form" inline-message :model="form" :rules="rules" label-width="80px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phoneNumber">
            <el-input v-model="form.phoneNumber" type="number"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="idNo">
            <el-input v-model="form.idNo"></el-input>
          </el-form-item>
        </el-form>
        <div v-html="paperData.descr"></div>
        <div v-for="(value,key,index) in dict_examinationQuestion" :key="index" style="margin:10px 0 ;">
          <div>{{value.title}}</div>
          <el-radio-group v-model="value.optionIds" style="margin: 5px 0;display: flex;flex-wrap: wrap;">
            <el-radio :label="item.optionId" v-for="item,i in paperInfo[key]" :key="i" style="width: 100px;margin: 10px;">{{item.content}}</el-radio>
          </el-radio-group>
        </div>
        <div v-if="!examination4Player" v-html="paperData.explanation"></div>
        <div>
          <div v-for="value,key,index in sumObj">
            <h4>{{key}} : {{value}}</h4>
          </div>
        </div>
        <codeImg v-if="!examination4Player" :qrUrl="codeUrl" />
        <div style="width: 100%;text-align: center;margin: 20px 0;position: fixed;bottom: 0;left: 0;" v-show="examinationInsertBtn">
          <el-button @click="saveExaminationData" v-if="examination4Player" type="primary">交卷</el-button>
        </div>
        <div v-if="evaluationShow">
          <div>评价:</div>
          <el-input
            type="textarea"s
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="evaluation">
          </el-input>
          <el-button @click="saveEvaluation" type="primary" size="small">保存</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import QRCode from "qrcodejs2"
  import codeImg from "@/components/QRcode/index.vue"
  import {examination_all,examination_data_preview,examination_evaluation,examination_insert} from '@/api/person.js'
  export default {
    props: ['examinationPaperId','paperData','examination4Player'],
    components: {codeImg},
    data() {
      return {
        dict_examinationQuestion: {},
        dict_classify: {},
        paperInfo: {},
        sumObj: {},
        evaluation: '',
        evaluationShow: false,
        currentExaminationPreviewData: {},
        form: {
          name: '',
          phoneNumber: '',
          idNo: ''
        },
        rules: {
          name: [{
            required: true,
            message: '这是必填项',
            trigger: 'blur'
          }, ],
          phoneNumber: [{
            required: true,
            message: '这是必填项',
            trigger: 'blur'
          }, ],
          idNo: [{
            required: true,
            message: '这是必填项',
            trigger: 'blur'
          }, ],
        },
        examinationInsertBtn: true,
        codeUrl: '',
      }
    },
    created() {
      this.getSbmitPaperPreview()
      if(this.examination4Player){
        let examinationInfo = window.localStorage.getItem('examinationInfo')
        if(examinationInfo){
          this.form = JSON.parse(examinationInfo)
        }
      }
    },
    watch: {
      examinationPaperId(val) {
        if(val) {
          this.getSbmitPaperPreview()
        }
      }
    },
    methods: {
      saveExaminationData() {
        this.$refs.form.validate((valid) => {
          if(valid){
            let reg_phone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
            let reg_idNo = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/
            if(!reg_phone.test(this.form.phoneNumber)){
              this.$message.warning('请正确填写您的手机号码！')
              return
            }
            if(!reg_idNo.test(this.form.idNo)){
              this.$message.warning('请正确填写您身份证号！')
              return
            }
            window.localStorage.setItem('examinationInfo',JSON.stringify(this.form))
            let data = {}
            let examinationData = []
            for(let key in this.dict_examinationQuestion) {
              if(this.dict_examinationQuestion[key].optionIds){
                examinationData.push({
                  examinationQuestionId: key,
                  idNo: this.form.idNo,
                  optionIds: this.dict_examinationQuestion[key].optionIds,
                  phoneNumber: this.form.phoneNumber,
                  playerName: this.form.name,
                })
              }else{
                this.$message.warning('交卷失败，请检查有未填选项')
                return
              }
            }
            data.examinationData = examinationData
            data.paperId = this.examinationPaperId
            examination_insert(data).then(res=>{
              if(res.code === 200){
                this.examinationInsertBtn = false
                this.$message.success('交卷成功')
              }else{
                this.$message.error(res.message)
              }
            })
          }else{
            window.scrollTo(0, 0);
            return false
          }
        })
      },
      saveEvaluation() {
        let data = {
           paperId: this.currentExaminationPreviewData.examinationPaperId,
           evaluation: this.evaluation,
           phoneNumber: this.currentExaminationPreviewData.phoneNumber,
           createDateAuto: this.currentExaminationPreviewData.createDateAuto,
        }
        examination_evaluation(data).then(res=>{
          if(res.code === 200) {
            this.$message.success('保存成功')
          }
        })
      },
      examinationPreview(data) {
        this.currentExaminationPreviewData = data
        let str = data.examinationPaperId+','+data.phoneNumber+','+data.createDateAuto
        examination_data_preview(str).then(res=>{
          if(res.code === 200) {
            this.evaluation = res.data.evaluation
            let examinationData = res.data.examinationData
            examinationData.forEach(item=>{
              this.dict_examinationQuestion[item.examinationQuestionId].optionIds = parseInt(item.optionIds)
            })
            for(let key in this.paperInfo) {
              this.paperInfo[key].some((item,index)=>{
                if(this.dict_examinationQuestion[key].optionIds == item.optionId){
                  this.dict_examinationQuestion[key]['score'] = item.score
                  return true
                }
              })
            }
            let sumObj = {}
            for(let key in this.dict_classify){
              sumObj[key] = this.dict_classify[key].reduce((total,current)=>{
                return total += this.dict_examinationQuestion[current].score
              },0)
            }
            this.sumObj = sumObj
            this.evaluationShow = true
          }
        })
      },
      getSbmitPaperPreview() {
        this.sumObj = {}
        this.evaluationShow = false
        this.codeUrl = `${window.location.origin}/#/examination/examinationpaper?paperId=${this.examinationPaperId}`
        examination_all(this.examinationPaperId).then(res=>{
          if(res.code === 200) {
            let questionInfo = res.data.questionInfo
            let dict_examinationQuestion = {}
            let dict_classify = {}
            questionInfo.forEach(item=>{
              dict_examinationQuestion[item.examinationQuestionId] = {title:item.title,optionIds:0}
              if (item.classify) {
                  if (dict_classify[item.classify]) {
                      dict_classify[item.classify].push(item.examinationQuestionId)
                  } else {
                      dict_classify[item.classify] = []
                      dict_classify[item.classify].push(item.examinationQuestionId)
                  }
              }
            })
            this.dict_examinationQuestion = dict_examinationQuestion
            this.dict_classify = dict_classify
            this.paperInfo = res.data.paperInfo
          }
        })
      },
    }
  }
</script>

<style scoped>

</style>
